<!-- 从设备同步 -->
<template>
    <div>
        <el-card class="box-card"  shadow="never">
        <div slot="header" class="clearfix">
          <span class="sign">I</span>
          <span class="sign-title">从设备同步</span>
          <!-- <span style="color:red;">（注意：只有异地备份的从备份设备才需要配置下面的参数）</span> -->
          <el-button style="float: right; padding:4px 8px;margin-left:5px;" type="primary" @click="confirmClick('ruleForm')">保存</el-button>
          <el-button style="float: right; padding:4px 8px;" type="primary"  :disabled='ruleForm.MailCenterStatus===false' @click="sendClick('ruleForm')">立即执行</el-button>
        </div>
        <div>
          <el-form :model="ruleForm" :rules="ruleForm.MailCenterStatus === false ? {} : rules" ref="ruleForm" label-width="30%">
            <el-row :gutter="24">
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label-width="25%">
                        <el-checkbox v-model="ruleForm.IsCompress" :false-label="0" :true-label="1"></el-checkbox>
                        <span> 开启压缩传输模式（不建议开启。勾选会减少传输数据量，但是会增大设备处理负担）</span>
                    </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label="备份间隔：">
                        <el-input size="small" placeholder="请输入备份间隔" v-model.number="ruleForm.Interval"><span slot="append">小时</span></el-input>
                    </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label="备份时间点：">
                        <!-- <el-input size="small" placeholder="请输入备份时间点" v-model.number="ruleForm.ExecHour"></el-input> -->
                        <el-select v-model.number="ruleForm.ExecHour" style="width:40%;" placeholder="请选择备份时间点">
                            <el-option v-for="item in 24" :key="item" :label="item-1 + ':00'" :value="(item-1)"></el-option>
                        </el-select>
                        <span class="text-style">（建议设置到无人业务时备份）</span>
                    </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label="文件传输流控：">
                        <el-input size="small" placeholder="请输入文件传输流控" v-model.number="ruleForm.LimitSpeed"><span slot="append">B/S</span></el-input>
                        <span class="text-style">（0表示不限速）</span>
                    </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label="通讯端口：">
                        <el-input size="small" placeholder="请输入通讯端口" v-model.number="ruleForm.RemotePort"></el-input>
                        <span class="text-style">（0表示使用默认端口10000）</span>
                    </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24" >
                  <el-form-item  label-width="25%">
                        <el-checkbox v-model="ruleForm.IsBackupFile" :false-label="0" :true-label="1"> 备份主备份设备文件（增量备份，推荐）</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label-width="25%">
                        <el-checkbox v-model="ruleForm.IsBackupNetdisk" :false-label="0" :true-label="1"> 备份转储版本文件（增量备份，不推荐备份）</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label="远程备份方式：">
                        <el-radio-group v-model="ruleForm.RemoteBackupType">
                            <el-radio :label="0">不启用远程备份</el-radio>
                            <el-radio :label="1">虚拟专网方式</el-radio>
                            <el-radio :label="2">序列号方式</el-radio>
                            <el-radio :label="3">动态域名方式</el-radio>
                            <el-radio :label="4">固定IP方式</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <div v-if="ruleForm.RemoteBackupType===1">
                    <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item  label="中心节点：" >
                            <el-input  size="small" placeholder="请输入中心节点地址" v-model="ruleForm.SuperNode"></el-input>
                            <span class="text-style">（请在运维人员指导下填写）</span>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item  label="分组名称：" >
                            <el-input size="small" v-model="ruleForm.Group" placeholder="请输入分组名称"></el-input>  
                            <span class="text-style">（请尽量填写唯一标识）</span>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item  label="本机虚拟地址：">
                                <el-input size="small" v-model="ruleForm.VpnIP" placeholder="请输入虚拟地址"></el-input>  
                                <span class="text-style">（请保证与其他节点地址不重复）</span>
                            </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="24" :lg="24" >
                        <el-form-item  label="传输秘钥：">
                                <el-input size="small" v-model="ruleForm.Key" placeholder="请输入传输秘钥"></el-input>  
                                <span class="text-style">（如果没有传输加密需求请填写为空，否则会影响备份效率）</span>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="24" :md="24" :lg="24" >
                        <el-form-item  label="远程主机虚拟地址：">
                                <el-input size="small" v-model="ruleForm.RemoteVPNIP" placeholder="请输入远程主机虚拟地址"></el-input> 
                        </el-form-item>
                    </el-col>
                </div>
                <div v-if="ruleForm.RemoteBackupType===2">
                    <el-col :sm="24" :md="24" :lg="24" >
                        <el-form-item  label="远程设备序列号：" >
                            <el-input  size="small" placeholder="请输入远程设备序列号" v-model="ruleForm.RemoteDeviceID"></el-input>
                            <span class="text-style">（请在运维人员指导下填写）</span>
                        </el-form-item>
                    </el-col>
                </div>
                <div v-if="ruleForm.RemoteBackupType===3">
                    <el-col :sm="24" :md="24" :lg="24" >
                        <el-form-item  label="动态域名：" >
                            <el-input  size="small" placeholder="请输入动态域名" v-model="ruleForm.RemoteDeviceHost"></el-input>
                            <span class="text-style">（请在运维人员指导下填写）</span>
                        </el-form-item>
                    </el-col>
                </div>
                <div v-if="ruleForm.RemoteBackupType===4">
                    <el-col :sm="24" :md="24" :lg="24" >
                        <el-form-item  label="固定IP方式：" >
                            <el-input  size="small" placeholder="请输入固定IP" v-model="ruleForm.RemoteDeviceHost"></el-input>
                            <span class="text-style">（请在运维人员指导下填写）</span>
                        </el-form-item>
                    </el-col>
                </div>
            </el-row>
          </el-form>    
        </div>
      </el-card>
    </div>
</template>

<script>
import { connrequest } from "@/api/firstPage";
export default {
    data(){
        return{
            ruleForm:{
                IsCompress:0,
                Interval:1,
                ExecHour:0,
                LimitSpeed:0,
                RemotePort:0,
                IsBackupFile:0,
                IsBackupNetdisk:0,
                RemoteBackupType:0,
                SuperNode:'',
                VpnIP:'',
                SuperNode:'',
                Key:'',
                RemoteVPNIP:'',
                RemoteDeviceHost:'',
                RemoteDeviceID:'',
            },
            rules:{}
        }
    },
    created(){
        this.getTimeObject();
    },
    methods:{
        async getTimeObject(){
            const res = await connrequest('GetParamBackupSecond');
            this.ruleForm = res.Data;
        },
        confirmClick(formName){
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    const data = {
                        Data : this.ruleForm
                    };
                    const res = await connrequest('SetParamBackupSecond',data);
                    if (res.Status.StatusCode === 0) {
                        this.$message.success('保存成功');
                        this.getTimeObject();
                    }
                }
            })     
        },
    }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}
.box-card{
  // margin: 16px;
  margin-bottom: 16px !important;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
::v-deep.el-input--small{
    width:40% !important;
}
::v-deep.el-card__header{
  padding: 10px !important;
}
.el-form-item{
  margin-bottom: 10px !important;
}
::v-deep.el-form-item__error{
  padding-top:  0 !important;
}
.text-style{
    color:red;
    margin-left:10px;
}
</style>